<template>
  <div>
    <Myheader :page="page"></Myheader>
    <div class="timeline-demo">

      <Divider v-if='tradeno'>{{$t('timeline.OrderNumber')}}{{tradeno}}</Divider>
      <timeline>

        <div v-if="state>2">
          <timeline-item v-if="payment">
            <i18n :path="timeline.refundPlateform" tag="h4" :class="{recent:isActive0}"
                  :places="{ paymentPlateform: this.payment }">

            </i18n>
          </timeline-item>
        </div>


        <div v-if="state>1">
          <timeline-item v-if="refund_at=='null'">
            <h4 v-bind:class="{recent:isActive}">{{$t('timeline.OrganizingCommittee')}}</h4>
          </timeline-item>

          <timeline-item v-if="refund_at!='null'">
            <h4 v-bind:class="{recent:isActive}">{{$t('timeline.refundTime')}}</h4>
            <p v-bind:class="{recent:isActive}">{{refund_at}}</p>
          </timeline-item>
        </div>


        <timeline-item>
          <h4>{{$t('timeline.submitRefund')}}</h4>
          <p>{{created_at}}</p>
        </timeline-item>
      </timeline>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable*/
  import {Timeline, TimelineItem, Divider} from 'vux'
  import Myheader from "@/common/components/myheader.vue";
  import {indexedDB} from "@/api/indexedDB.js";
  import mixin from "@/common/js/mixin";
  export default {
    mixins: [mixin],
    props: ["page"],
    data () {
      return {
        created_at: '',
        refund_at: '',
        payment: '',
        state: 1,
        isActive0: false,
        isActive: false,
        tradeno: ''
      }
    },
    created () {
			//获取indexedDB存在的数据IDNumber,有进行绑定
      indexedDB('refundInfo','get',this.RACEID,'',function(a){
        console.log(a)
	      this.tradeno = a.tradeno
	      this.created_at = a.created_at
	      this.refund_at = a.refund_at
	      this.payment = a.payment
	      if (this.refund_at == 'null') {
	        this.state = 2
	      }
	      if (this.refund_at !== 'null') {
	        this.state = 3
	      }
	      if (this.state == 2) {
	        this.isActive = true
	      }
	      if (this.state == 3) {
	        this.isActive0 = true
	      }
      }.bind(this));
    },
    methods: {},
    components: {
      Timeline,
      TimelineItem,
      Divider,
      Myheader
    }
  }
</script>


<style lang="less" rel="stylesheet/less">
  ul, li {
    list-style: none;
  }

  .timeline-demo {
    p {
      color: #888;
      font-size: 0.8rem;
    }
    h4 {
      color: #666;
      font-weight: normal;
    }
    .recent {
      color: rgb(4, 190, 2)
    }
  }
</style>
